<template>
    <div>
        <!-- 三级分类全局组件 -->
        <category :show="show"></category>
        <!-- spu数据展示 -->
        <el-card v-show="show==0" shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
            <!-- 添加SPU按钮 -->
            <el-button type="primary" size="default" :icon="Plus" @click="addSpu" :disabled="!categoryStore.c3Id">添加SPU
            </el-button>
            <el-table border stripe style="margin:10px 0;" :data="spuList.records" v-loading="loading">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{row,$index}">
                        <el-button type="primary" size="small" :icon="Plus" title="添加SKU" @click="addSku(row)">
                        </el-button>
                        <el-button type="warning" size="small" :icon="Edit" title="修改SPU" @click="updateSpu(row)">
                        </el-button>
                        <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU" @click="findSku(row)">
                        </el-button>
                        <el-button type="danger" size="small" :icon="Delete" title="删除SPU" @click="deleteSpu(row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @current-change="getSpuList" @size-change="getSpuList"
                v-model:current-page.sync="currentPage" :page-sizes="[1,3,5,7]" v-model:page-size="pageSize"
                layout=" prev, pager, next, jumper,->,sizes,total" :total="spuList.total" background :pager-count="7">
            </el-pagination>

        </el-card>

        <Spu v-show="show==1" @changeShow="changeHandler" ref="spuRef"></Spu>
        <Sku v-show="show==2" ref="skuRef" @changeShow="changeHandler"></Sku>

        <!-- 对话框 查看SKU -->
        <el-dialog v-model="dialogTableVisible" title="查看SKU">
            <el-table  :data="skuList">
                <el-table-column property="skuName" label="名称"  />
                <el-table-column property="price" label="价格(元)" />
                <el-table-column property="weight" label="重量(千克)" />
                <el-table-column label="默认图片">
                    <template #="{row,$index}">
                        <img :src="row.skuDefaultImg" alt="" style="width: 100px;height:100px;">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import Spu from './addOrUpdateSpu.vue';
import Sku from './addSku.vue'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    InfoFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reqSpuList, reqDeleteSpu, reqSkuList } from '@/api/product/spu/spu'
import { ref, watch, onUnmounted } from 'vue';
// 引入仓库
import useCategoryStore from '@/stores/category'
let categoryStore = useCategoryStore()
// 加载动画效果
let loading = ref<boolean>(false)
// 切换场景
let show = ref<number>(0)
// 存储当前第几页
let currentPage = ref<number>(1)
// 存储一页显示几条数据
let pageSize = ref<number>(3)
// 存储spu数据
let spuList = ref({})
// 获取子组件spu的实例
let spuRef = ref()
// 获取子组件sku的实例
let skuRef = ref()
// 控制对话框的显示隐藏
let dialogTableVisible = ref(false)
// 存储sku列表
let skuList = ref()
watch(
    () => categoryStore.c3Id,
    () => {
        if (categoryStore.c3Id == '') return
        getSpuList()
    }
)
// 发请求获取SPU数据
const getSpuList = async () => {
    loading.value = true
    let result = await reqSpuList(currentPage.value, pageSize.value, categoryStore.c3Id)
    console.log(result);
    spuList.value = result
    loading.value = false
}

// 点击添加SPU按钮
const addSpu = () => {
    show.value = 1
    spuRef.value.initAddSpu(categoryStore.c3Id)
}
// 点击修改SPU按钮
const updateSpu = (row) => {
    show.value = 1
    spuRef.value.getAllInfo(row)
}

// 子组件自定义事件的回调
const changeHandler = ({ shows, flag }) => {
    show.value = shows
    if (flag == 'add') {
        getSpuList()
    } else {
        getSpuList(currentPage.value)
    }
}
// 点击删除
const deleteSpu = async (row) => {

    try {
        // 发请求删除SPU
        await reqDeleteSpu(row.id)
        ElMessage({
            type: 'success',
            message: `删除${row.spuName}成功`
        })
        getSpuList(currentPage.value)
    } catch (error) {
        ElMessage({
            type: 'error',
            message: `删除${row.spuName}失败`
        })
    }
}
// 添加SKU
const addSku = (row) => {
    show.value = 2
    skuRef.value.initSku(categoryStore.c1Id, categoryStore.c2Id, row)
}
// 点击查看SKU
const findSku = async (row) => {
    dialogTableVisible.value = true
    let result = await reqSkuList(row.id)
    console.log(result);
    skuList.value = result
}
// 组件销毁
onUnmounted(() => {
    categoryStore.c1Id = ''
    categoryStore.c2Id = ''
    categoryStore.c3Id = ''
    categoryStore.c3List = []
    categoryStore.c3List = []
    categoryStore.c3List = []
})

</script>

<style scoped>

</style>